<script setup lang="ts">
import { useIntersectionObserver } from '@vueuse/core'
import { ref } from 'vue'
const target = ref<null | HTMLImageElement>(null) // 创建空对象和dom元素发生关联
// 参数1 是要监视的dom元素
// 参数2是一个回调函数,回调函中参数1是一个数组 数组找那个有一个对象 [ obj ]
// obj中有一个 属性isIntersecting  可以监测元素是否进入了可视区 是一个布尔值
// useIntersectionObserver 返回值是一个对象 从中解构出一个stop方法, 只要一调用stop() 就不再监听
const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
  // console.log(isIntersecting);
  // 如果进入了可视区, 再为图片设置src的值
  if (isIntersecting) {
    console.log('赋值了')
    target.value!.src = 'https://img2.baidu.com/it/u=3140395897,3779689012&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=468'
    // 一次赋值后　拆解
    stop()
  }
})
</script>
<template>
  <div style="height: 3000px;"></div>
  <img ref="target" src="" alt="">
</template>
<style scoped>
</style>